<template>
	<view class="infoView">
		<view class="infoViewTitle">
			{{ dbzjDetail.dbzjDeptName }}
		</view>

		<view class="infoViewMap">
			<map style="width: 100%; height: 700rpx;" :latitude="latitude" :longitude="longitude"
				:markers="covers"></map>
		</view>

		<view class="formView">
			<view class="formViewItem">
				<view class="formViewItemLeft">
					地址
				</view>
				<view class="formViewItemRight">
					{{ dbzjDetail.areaAddr }}
				</view>
			</view>
			
			<view class="formViewItem">
				<view class="formViewItemLeft">
					管理员
				</view>
				<view class="formViewItemRight">
					{{ dbzjDetail.managerAdminName }}
				</view>
			</view>
			
			<view class="formViewItem">
				<view class="formViewItemLeft">
					管理员电话
				</view>
				<view class="formViewItemRight">
					{{ dbzjDetail.managerTel }} 
				</view>
			</view>
		</view>

		<u-gap height="150" bgColor="#ffffff"></u-gap>

		<view class="infoViewInfoBtn">
			<view class="infoViewInfoBtnItem msjz" @tap="indetail('msjz')">
				码上聚智
			</view>

			<view class="infoViewInfoBtnItem msxs" @tap="indetail('msxs')">
				码上议事
			</view>

			<view class="infoViewInfoBtnItem jggk" @tap="indetail('jggk')">
				码上公开
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				idd:'',
				title: 'map',
				dbzjDetail:{},
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}]
			}
		},
		onLoad(e) {
			if (e.id) {
				this.idd = e.id
				this.getDetail()
			}
		},
		methods: {
			indetail(e){
				let that = this
				if(e == 'msjz'){
					uni.navigateTo({
						url:'../msjz/index/index?id=' + that.idd
					})
				}
				
				if(e == 'msxs'){
					uni.navigateTo({
						url:'../msys/index/index?id=' + that.idd
					})
				}
				
				if(e == 'jggk'){
					uni.navigateTo({
						url:'../jggs/index/index?id=' + that.idd
					})
				}
			},
			getDetail() {
				let that = this
				let url = '/minqingzhitong/msManageDept/query';
				this.$request(url, {
					id: that.idd,
					clientCode: "370782"
				}, {
					load: true
				}).then((res) => {
					if(res.code == 200){
						if(res.data.areaLal){
							let a = res.data.areaLal.split(',')
							that.latitude = a[1]
							that.longitude = a[0]
						}
						
						that.dbzjDetail = res.data
					}
				});

			}
		}
	}
</script>

<style lang="less" scoped>
	.infoView {
		background-color: #ffffff;
		min-height: 90vh;

		.infoViewTitle {
			// position: absolute;
			// top: 0;
			// width: 95%;
			background-color: #ffffff;
			z-index: 100;
			line-height: 100upx;
			text-align: center;
			font-size: 17px;
			border: 1upx solid #999999;
			margin: 20upx;
		}

		.infoViewMap {
			// margin: 20upx;

		}


		.infoViewInfoList {
			padding: 20upx 0;

			.infoViewInfoListItem {
				display: flex;
				font-size: 16px;
				padding: 20upx 0;
				min-height: 80upx;
				border-bottom: 1upx solid #999999;

				.infoViewInfoListItemLeft {
					flex: 1;
					padding: 0 20upx;
					text-align: left;
				}

				.infoViewInfoListItemRight {
					flex: 1;
					padding: 0 20upx;
					text-align: right;
				}
			}
		}

		.infoViewInfoBtn {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 128upx;

			.infoViewInfoBtnItem {
				width: 216upx;
				height: 70upx;
				background-color: red;
				line-height: 70upx;
				margin: 20upx 16upx;
				text-align: center;
				color: #ffffff;
				border-radius: 20upx;
			}
		}
	}

	.formView {
		.formViewItem {
			display: flex;
			align-items: center;
			height: 120upx;
			padding: 0 40upx;
			border-bottom: 1upx solid #F6F7FB;

			.formViewItemLeft {
				flex: 1;
				text-align: left;
				color: #999999;
				font-size: 17px;
			}

			.formViewItemRight {
				flex: 1.5;
				text-align: right;
				color: #333333;
				font-size: 17px;
			}
		}

		.textA {
			padding: 0 40upx;
			font-size: 17px;
			color: #333333;
			word-break: break-word;
		}
	}

	.msjz {
		background-color: #F5A623 !important;
	}

	.msxs {
		background-color: #FF7100 !important;
	}

	.jggs {
		background-color: #D0021B !important;
	}
</style>
